<template>
  <div class="mian">
    <div class="head">
      活动记录
    </div>
    <div class="body">
      <el-table
        :data="expertActivityRecordss"
        style="width: 100%"
        :row-class-name="tableRowClassName">
        <el-table-column
          prop="eno"
          label="活动名称"
          width="150">
        </el-table-column>
        <el-table-column
          prop="edno"
          label="活动详情"
          width="650">
        </el-table-column>
        <el-table-column
          prop="exardate"
          label="参加时间"
          width="200">
        </el-table-column>
      </el-table>
    </div>
  </div>
</template>

<script>
  import api from "../../../../axios/api";
  import utilsFd from '../../../../static/js/utils/index.js'

  export default {
    name: "activity",
    data(){
      return {
        expertActivityRecordss:[],
        currentPage: 1,
        pageInfo:{}
      }
    },
    methods: {
      handleSizeChange(val) {
        console.log(`每页 ${val} 条`);
      },
      handleCurrentChange(val) {
        console.log(`当前页: ${val}`);
        this.currentPage = val;
        this.setDataFromAxios(val);
      },
      tableRowClassName({row, rowIndex}) {
        if (rowIndex % 2 == 0) {
          return 'warning-row';
        } else {
          return '';
        }
        return '';
      },
      setDataFromAxios: function (currPage) {
        if(currPage!=null){
          this.currentPage = currPage;
        }
        //为什么要封装一下方法 1.每个vue组件有自己的一些参数处理，简化调用本来这个setDataFromAxios这个方法属于api 重新封装就属于当前页面
        api.setDataFromAxios("/api/expertActivityRecords/pageInfo?currPage="+this.currentPage+"&pageSize=5", null, "get")
          .then(res => {
            console.log(res)
            this.expertActivityRecordss = res.tList;
            this.pageInfo = res.obj;
            this.expertActivityRecordssData();
          });//.then方法 就是当服务器有返回的时候执行回调函数，对比jquery的ajax success:function（data）
      },
      procesDate(date) {
        var date = new Date(date)
        console.log(date)
        date  = utilsFd.FD.Fd().format(date)
        return date
      },
      expertActivityRecordssData() {
        for (var i = 0; i < this.expertActivityRecordss.length; i++) {
          this.expertActivityRecordss[i].exardate = this.procesDate(this.expertActivityRecordss[i].exardate);
          this.expertActivityRecordss[i].exartime = this.procesDate(this.expertActivityRecordss[i].exartime);
          //console.log(this.user.orderForms[i].uresdate)
        }
      },
    },
    created:function () {
      this.setDataFromAxios();//1.创建页面的时候 调用自定义的数据请求方法  而数据请求方法把得到数据赋值给了当前页面的变量
    }
  }
</script>

<style scoped lang="stylus">
  .mian
    width 1000px
    height 500px
    margin 30px auto
    .head
      font-size 25px
      font-weight bold
    .body
      .cell
        text-align:center

</style>
